var React = require('react'); 

var ListComponent = React.createClass({
	getDefaultProps:function(){
		return {
			listUrl:'http://localhost/list.php',
			detailUrl:'http://localhost/detail.php',
			foodPrefix:'http://tnfs.tngou.net/image'
		}
	},
	getInitialState:function(){
		return {
			list:[],
			classID:0
		}
	},
	getData: function(classID,url){
		var _this = this;

		if(classID==undefined){
			classID = this.state.classID;
		}

		$.ajax({
			url:this.props.listUrl,
			data:{
				id:classID
			}
		}).success(function(res){
			var resultObj = JSON.parse(res);
			var resultList = resultObj.tngou;

			_this.setState({
				list:resultList,
				classID:classID,
				data:null,
				total:resultObj.total
			})
		})

	},
	componentWillMount:function(){
		// console.log(this.props.cid)
		this.getData(this.props.cid,this.props.listUrl);
	},
	componentWillReceiveProps:function(nextProps,nextState){
		// console.log(nextProps)
		// this.getData(nextProps.cid,this.props.detailUrl);
	},
	handlerPageLinkClick:function(e){
		var page = e.target.getAttribute('id');
		var classID = e.target.getAttribute('classID');


		var _this = this;
		$.ajax({
			url:this.props.listUrl,
			data:{
				id:classID,
				page:page
			}
		}).success(function(res){
			var resultObj = JSON.parse(res);
			var resultList = resultObj.tngou;

			_this.setState({
				list:resultList,
				classID:classID,
				data:null,
				total:resultObj.total
			})
		})

	},
	handlerClick:function(e){
		var detailId = e.target.getAttribute('id');
		var classID = e.target.getAttribute('classID');
		
		var _this = this;
		$.ajax({
			url:this.props.detailUrl,
			data:{
				id:detailId
			}
		}).success(function(res){
			var resultObj = JSON.parse(res);
			var resultData = resultObj;

			_this.setState({
				data:resultData,
				classID:classID
			})
		})
	},
	goBackList:function(){
		this.getData(this.state.classID,this.props.listUrl);
	},
	render:function(){

		var imageStyle = {
			width:'140px',
			height:'140px'
		}
		// 处理列表页内容
		var classID = this.state.classID;

		var lst = [];
		var lists = this.state.list;
		var listsLen = lists.length;
		var pageList =[];
		var pageListContent;

		var showData = [];
		if(lists){
			var rowList = [];
			// Math.ceil向上舍入计算Rows行数
			for (var i = 0; i < Math.ceil(listsLen/3); i++) {
				var colList = [];
				for (var j = 0; j < 3; j++) {
					var index= i*3+j;
					//加上记录数判断，如果下标索引值小于总的数组长度，则进行列表显示，否则不加入数据
					if(index<listsLen){
						var imgUrl = this.props.foodPrefix + lists[index].img;

						colList.push(
							<div key={index} className="col-lg-4">
					          <img className="img-circle" style={imageStyle} src={imgUrl} alt="Generic placeholder image"/>
					          <h2>{lists[index].name}</h2>
					          <p>{lists[index].description}</p>
					          <p><a className="btn btn-default" href="#" role="button" classID={classID} id={lists[index].id} onClick={this.handlerClick} >查看详情 &raquo;</a></p>
					        </div>
						)
					}
				};
				rowList.push(
					<div className="row" key={i}>{colList}</div>
				)
			};

			showData = rowList;

			//列表分页处理
			var pageMaxSize = Math.ceil(this.state.total/30);
			console.log(this.state.total,pageMaxSize);
			for (var i = 1; i < pageMaxSize; i++) {
				pageList.push(
					<li key={i}><a href="#" onClick={this.handlerPageLinkClick} classID={classID} id={i}>{i}</a></li>
				)
			};

			pageListContent = (
				<nav>
				  <ul className="pagination">
				    	{pageList}
				  </ul>
				</nav>
			)
			
		}

		//处理详情页内容
		var data = this.state.data;

		if(data){
			showData = (
				<div className="container">
					<div className="starter-template">
				        <h1>{data.name}</h1>

				        <img src={this.props.foodPrefix +data.img}/>
				        <p className="lead">{data.description}</p>
				        <a href="#" className="btn btn-primary btn-lg" role="button" onClick={this.goBackList}>返回列表</a>
				    </div>
			    </div>
			)
		}

		return (
			 <div className="container marketing">
			 	  {pageListContent}
			      {showData}
			      
			</div>
		)
	}
})

module.exports = ListComponent;